import type { ShapeProperties } from '../../draw/shapes/Shape';
import styles from './index.module.less';

type PropertyPanelProps = {
  properties: ShapeProperties | null;
  onPropertyChange: (prop: string, value: unknown) => void;
};

export function PropertyPanel({
  properties,
  onPropertyChange,
}: PropertyPanelProps) {
  if (!properties) {
    return (
      <div className={styles.propertyPanel}>
        <div className={styles.propertyTitle}>属性面板</div>
        <div className={styles.noSelection}>未选中任何形状</div>
      </div>
    );
  }

  const handleChange = (prop: string, value: string) => {
    // 根据属性类型转换值
    let parsedValue: unknown = value;

    if (prop === 'lineWidth') {
      parsedValue = parseInt(value, 10);
    } else if (
      prop.includes('x') ||
      prop.includes('y') ||
      prop === 'radius' ||
      prop === 'width' ||
      prop === 'height'
    ) {
      parsedValue = parseFloat(value);
    }

    onPropertyChange(prop, parsedValue);
  };

  return (
    <div className={styles.propertyPanel}>
      <div className={styles.propertyTitle}>属性面板</div>

      {/* 通用属性 */}
      <div className={styles.propertyItem}>
        <div className={styles.propertyRow}>
          <span className={styles.propertyLabel}>类型:</span>
          <span className={styles.propertyValue}>{properties.type}</span>
        </div>

        <div className={styles.propertyRow}>
          <span className={styles.propertyLabel}>颜色:</span>
          <input
            type="color"
            value={properties.color}
            onChange={(e) => handleChange('color', e.target.value)}
          />
        </div>

        <div className={styles.propertyRow}>
          <span className={styles.propertyLabel}>线宽:</span>
          <input
            type="number"
            className={styles.editInput}
            value={properties.lineWidth}
            onChange={(e) => handleChange('lineWidth', e.target.value)}
            min="1"
            max="20"
          />
        </div>
      </div>

      {/* 根据不同类型显示特定属性 */}
      {properties.type === 'Rectangle' && (
        <div className={styles.propertyItem}>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>起点X:</span>
            <input
              type="number"
              className={styles.editInput}
              value={properties.position?.x}
              onChange={(e) => handleChange('x', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>起点Y:</span>
            <input
              type="number"
              className={styles.editInput}
              value={properties.position?.y}
              onChange={(e) => handleChange('y', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>终点X:</span>
            <input
              type="number"
              className={styles.editInput}
              value={(properties as any).endPosition?.x}
              onChange={(e) => handleChange('endX', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>终点Y:</span>
            <input
              type="number"
              className={styles.editInput}
              value={(properties as any).endPosition?.y}
              onChange={(e) => handleChange('endY', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>宽度:</span>
            <span className={styles.propertyValue}>{(properties.dimensions as { width: string })?.width}</span>
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>高度:</span>
            <span className={styles.propertyValue}>{(properties.dimensions as { height: string })?.height}</span>
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>面积:</span>
            <span className={styles.propertyValue}>{(properties as any).area}</span>
          </div>
        </div>
      )}

      {properties.type === 'Circle' && (
        <div className={styles.propertyItem}>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>圆心X:</span>
            <input
              type="number"
              className={styles.editInput}
              value={(properties as any).center?.x}
              onChange={(e) => handleChange('x', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>圆心Y:</span>
            <input
              type="number"
              className={styles.editInput}
              value={(properties as any).center?.y}
              onChange={(e) => handleChange('y', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>半径:</span>
            <input
              type="number"
              className={styles.editInput}
              value={properties.radius as string}
              onChange={(e) => handleChange('radius', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>直径:</span>
            <span className={styles.propertyValue}>{(properties as any).diameter}</span>
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>周长:</span>
            <span className={styles.propertyValue}>{(properties as any).circumference}</span>
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>面积:</span>
            <span className={styles.propertyValue}>{(properties as any).area}</span>
          </div>
        </div>
      )}

      {properties.type === 'Path' && properties.points && (
        <div className={styles.propertyItem}>
          <div className={styles.propertyTitle}>路径属性</div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>点数:</span>
            <span className={styles.propertyValue}>{properties.points.length}</span>
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>长度:</span>
            <span className={styles.propertyValue}>{(properties as any).pathLength}</span>
          </div>
          <div className={styles.propertyTitle}>路径点</div>
          <div className={styles.pointList}>
            {properties.points?.map(
              (point: { x: number; y: number }, index: number) => (
                <div
                  key={`point(${point.x},${point.y})-${index}`}
                  className={styles.pointItem}
                >
                  <span>{index + 1}. X:</span>
                  <input
                    type="number"
                    className={styles.editInput}
                    value={point.x}
                    onChange={(e) =>
                      handleChange(`point-${index}-x`, e.target.value)
                    }
                  />
                  <span>Y:</span>
                  <input
                    type="number"
                    className={styles.editInput}
                    value={point.y}
                    onChange={(e) =>
                      handleChange(`point-${index}-y`, e.target.value)
                    }
                  />
                </div>
              ),
            )}
          </div>
        </div>
      )}

      {properties.type === 'Cube' && (
        <div className={styles.propertyItem}>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>宽度:</span>
            <input
              type="number"
              className={styles.editInput}
              value={(properties.dimensions as { width: string })?.width}
              onChange={(e) => handleChange('width', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>高度:</span>
            <input
              type="number"
              className={styles.editInput}
              value={(properties.dimensions as { height: string })?.height}
              onChange={(e) => handleChange('height', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>深度:</span>
            <input
              type="number"
              className={styles.editInput}
              value={(properties.dimensions as { depth: string })?.depth}
              onChange={(e) => handleChange('depth', e.target.value)}
            />
          </div>
          <div className={styles.propertyRow}>
            <span className={styles.propertyLabel}>体积:</span>
            <span className={styles.propertyValue}>{properties.volume}</span>
          </div>
        </div>
      )}
    </div>
  );
}
